<template lang="pug">
    el-card(shadow="never", class="my-comments-panel")
        div( slot="header" class="clearfix")
            el-page-header(@back="goBack" content="我的评论")
        <!--无限滚动 如果在查询中则禁用滚动-->
        div(v-infinite-scroll="load", infinite-scroll-disabled="querying")
            <!--以下是无线加载的内容--->
            el-row(v-for="comment in myComments", class="my-comments-panel_detail", :key="comment.commentId")
                el-col(:span="24", style="display:flex")
                    <!--评论图标-->
                    svg(aria-hidden="true",style="width:34px;height:34px;margin-right:10px;")
                        use(xlink:href="#icon-xiaoxi1-copy", v-if="comment.commentType == 'post'")
                        use(xlink:href="#icon-xiaoxi", v-else-if="comment.commentType == 'reply'")
                    <!--评论数据，放在一个div中-->
                    div
                        <!--[谁]评论了[文章标题/你]-->
                        div
                            strong(@click.stop="showUserZone(comment.commentBy)") {{comment.commentByName}} 
                            span(v-if="comment.commentType == 'post'") 评论了&nbsp;
                            span(v-else-if="comment.commentType == 'reply'") 回复了&nbsp;
                            <!---显示文章标题-->
                            strong(v-if="comment.commentType == 'post'",
                                @click.stop="showPostDetail(comment.postId)") {{comment.postTitle || '你的文章'}}
                            strong(v-else-if="comment.commentType == 'reply'") 你的评论
                        <!--[评论/回复内容-->
                        div(class="my-comments-panel_detail__content") 
                            span {{comment.commentContent}}
                            span(v-if="comment.parentCommentId") //
                            strong(v-if="comment.parentCommentId",
                                @click.stop="showUserZone(comment.parentCommentBy)") @{{comment.parentCommentByName}} :
                            span(v-if="comment.parentCommentId") {{comment.parentCommentContent}}
                        <!--[评论/回复时间-->
                        div( class="my-comments-panel_detail__time") 
                            span {{comment.commentAt | from_now}}
            div(style="text-align:center")
                p(v-if="querying") 
                    i(class="el-icon-loading")
                    span 加载中...
                p(v-if="noMore") 没有更多了
            active-panel(:visible="userZoneVisible",@history-back="userZoneVisible=false")
                zone(:wx-uid="currentZoneUid")
            active-panel(:visible="postDetailVisible", @history-back="postDetailVisible=false")
                post-detail(:post-id="currentPostId")
</template>
<script>
import axios from "@/plugins/axios";
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
dayjs.extend(relativeTime);

import "dayjs/locale/zh-cn";
dayjs.locale("zh-cn");

export default {
  name: "my-comments",
  data() {
    return {
      myComments: [],
      querying: false,
      noMore: false,

      userZoneVisible: false,
      currentZoneUid: null,
      postDetailVisible: false,
      currentPostId: null
    };
  },
  computed: {
    /**
     * 把已加载的评论id列表作为过滤条件
     */
    commentIdsExcluded() {
      return this.myComments.map(item => {
        return item.commentId;
      });
    }
  },
  methods: {
    getMyComments() {
      const data = { commentIdsExcluded: this.commentIdsExcluded };
      const options = { url: "forum/comment/mycomments", method: "post", data };
      this.querying = true;
      axios(options)
        .then(comments => {
          if (comments.length === 0) {
            this.noMore = true; // 如果获取不到数据 则没有更多了
            return;
          }
          this.myComments = this.myComments.concat(comments);
        })
        .catch(() => {})
        .then(() => (this.querying = false));
    },
    /**
     * 无限加载拉倒底部
     */
    load() {
      if (this.noMore) return; // 不要再加载
      this.getMyComments();
    },
    /**
     * 显示用户资料卡
     */
    showUserZone(uid) {
      if (!uid) return;
      this.currentZoneUid = uid;
      this.userZoneVisible = true;
    },
    showPostDetail(postId) {
      this.currentPostId = postId;
      this.postDetailVisible = true;
    },

    goBack() {
      this.$router.push({ path: "/user" });
    }
  },
  created() {
    // this.getMyComments();
  },
  filters: {
    from_now(val) {
      return dayjs().from(dayjs(val));
    }
  }
};
</script>
<style lang="less" scoped>
@import "../../common/common.less";
.my-comments-panel {
  &_detail {
    font-size: 16px;
    line-height: 31px;
    border-bottom: 1px solid @segmentation_color;
    margin-bottom: 8px;

    &__time {
      font-size: 12px;
      color: #666;
    }
  }
}
</style>
